<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员信息操作</title>
    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/3.3.7/css/bootstrap.css"/>
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
</head>
<body>
<div id="vuebox">
<div id="select">
    <table class="table table-striped">
        <tr><td colspan="7">人员列表</td></tr>
        <tr>
            <td>编号</td>
            <td>描述</td>
            <td>户型</td>
            <td>租金</td>
            <td>发布时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in persons.list">
            <td>{{item.houseid}}</td>
            <td>{{item.housedesc}}</td>
            <td v-show="item.typeid==1">啊啊</td>
            <td v-show="item.typeid==2">玩完</td>
            <td v-show="item.typeid==3">嗯嗯</td>
            <td>{{item.monthlyrent}}</td>
            <td>{{item.publishdate}}</td>
        </tr>
        <tr><td colspan="7">
            <button class="btn btn-info" @click="toadd()">添加</button>
        </td></tr>
    </table>
</div>
    <div id="add">
        <table class="table table-striped">
            <tr><td colspan="7">添加人员</td></tr>
            <tr>
                <td>编号</td>
                <td>描述</td>
                <td>户型</td>
                <td>租金</td>
                <td>发布时间</td>
                <td>操作</td>
            </tr>
            <tr>
                <td><input type="text" value="系统自动生成" readonly="readonly"></td>
                <td><input type="text" v-model="person.housedesc" ></td>
                <td><input type="text" v-model="person.typeid"  placeholder="1为啊啊 1为玩完 2为嗯嗯"></td>
                <td><input type="text" v-model="person.monthlyrent" ></td>
                <td><input type="text" v-model="person.publishdate" ></td>
                <td>
                    <button class="btn btn-success" @click="save()">保存</button>
                    <button class="btn btn-info" @click="toselect()">返回</button>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            persons:{},
            person:{
                housedesc:"",
                typeid:"",
                monthlyrent:'',
                publishdate:''
            }
        },
        methods:{
            selectAllPerson:function () {
                axios.get("http://localhost:8081/selectAllHouse").then(res=>{
                    this.persons=res.data;
                })
            }
            toadd:function () {
                $('#add').show();
                $('#select').hide();
            },
            toselect:function () {
                $('#add').hide();
                $('#select').show();
            },
            save:function () {
                axios.get("http://localhost:8081/addhouse",this.person).then(res=>{
                    if (res.data>0){
                        this.toselect();
                        this.selectAllPerson();
                    }
                })
            }
        },
        mounted(){
            this.selectAllPerson();
            this.toselect();
        }
    })
</script>